{% extends "base.html" %}
{% block breadcrumb_current %}
    库存管理 > 物料出入库审批记录
{% endblock %}
{% block content %}
    <div class="bg-light p-3 shadow-sm">
        <h5 style="color: #417690;">
            系统仅提供最近 50 条物料的出入库审批记录
            <a href="{% url 'navigation' %}" class="btn btn-secondary btn-sm float-end">返回首页</a></h5>
    </div>
    <div class="container mt-4">
        <!-- 表格展示，初始隐藏 -->
        <table id="desktop-view" class="table table-hover" style="margin-top: 15px; display: none;">
            <thead>
                <tr>
                    <th>仓库名称</th>
                    <th>出入库申请</th>
                    <th>原有数量</th>
                    <th>申请数量</th>
                    <th>更新后数量</th>
                    <th>申请人</th>
                    <th>审批结果</th>
                </tr>
            </thead>
            <tbody>
                {% if records %}
                    {% for record in records %}
                        <tr class="custom-row-color">
                            <td>{{ record.inventory.warehouse.warehouse }}</td>
                            <td>{{ record.get_operatemode_display }}{{ record.inventory.material.material }}</td>
                            <td>{{ record.quantity_before }}</td>
                            <td>{{ record.quantity }}</td>
                            <td>{{ record.quantity_after }}</td>
                            <td>{{ record.operator.realname }}{{ record.operatedate|date:"Y-m-d" }}</td>
                            <td>{{ record.get_approvalstatus_display }}</td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="7" class="text-center">暂无记录</td>
                    </tr>
                {% endif %}
            </tbody>
        </table>

        <!-- 卡片展示，初始隐藏 -->
        <div id="mobile-view" style="display: none;">
            {% if records %}
                {% for record in records %}
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">仓库: {{ record.inventory.warehouse.warehouse }}</h5>
                            <p class="card-text">
                                <strong>出入库申请:</strong> {{ record.get_operatemode_display }}{{ record.inventory.material.material }}<br>
                                <strong>原有数量:</strong> {{ record.quantity_before }}<br>
                                <strong>申请数量:</strong> {{ record.quantity }}<br>
                                <strong>更新后数量:</strong> {{ record.quantity_after }}<br>
                                <strong>申请人:</strong> {{ record.operator.realname }}{{ record.operatedate|date:"Y-m-d" }}<br>
                                <strong>审批结果:</strong> {{ record.get_approvalstatus_display }}
                            </p>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="card mb-3">
                    <div class="card-body text-center">
                        暂无记录
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- 设备检测脚本 -->
        <script>
            function isMobile() {
                return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            }

            document.addEventListener('DOMContentLoaded', function () {
                const desktopView = document.getElementById('desktop-view');
                const mobileView = document.getElementById('mobile-view');

                if (isMobile()) {
                    mobileView.style.display = 'block';
                } else {
                    desktopView.style.display = 'table';
                }
            });
        </script>
    </div>
{% endblock %}